﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<header class="header-area inner-page">
    <th:block th:include="commons/front::public-resource">LOGIN</th:block>
    <th:block th:include="commons/front::login-bar">login-bar</th:block>
    <th:block th:include="commons/front::navigation">navigation</th:block>
    <link th:href="@{/public/front/css/page.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/public/front/js/jquery.z-pager.js}"></script>
    <title>作品库</title>

    <style>
        .class-meta a {
            word-break:break-all; /* 支持IE和chrome，FF不支持*/
            word-wrap:break-word; /* 以上三个浏览器均支持 */
        }

        .class-meta p {
            text-align: center;
        }
    </style>
</header>
<body>

<section class="classes-section-2">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="class-sort-btn-section">
                    <ul class="sort-btn pull-left" id="categoryContainer">
                        <li class="active filter" data-id="-1" data-filter="mix"><a href="#">全部</a></li>
                        <li class="filter" data-id="1" data-filter="kinder" id="kinder"><a href="#">流行</a></li>
                        <li class="filter" data-id="2" data-filter="play" id="play"><a href="#">引领</a></li>
                        <li class="filter" data-id="3" data-filter="primary" id="primary"><a href="#">时尚</a></li>
                    </ul>

                    <div class="clearfix"></div>
                </div>
            </div>
        </div>

        <div class="row">
            <div id="disconver-container">
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="page text-center">
                    <div id="pager" class="pager clearfix page"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /.event-section -->

<th:block th:include="commons/front::footer">FOOTER</th:block>
<th:block th:include="commons/front::login">LOGIN</th:block>

<template id="discover-template">
    {%each(i,d) list %}
    <div class="col-sm-4 col-xs-12 mix kinder play">
        <div class="single-class">
            <div class="class-img" onclick="userInfoDetail(${d.customerId},${d.id})" style="cursor: pointer; ">
                <img alt="" src="${d.imgUrl}" style="height: 220px; object-fit: cover" onerror="loadError(this)">
                <div class="class-hover">
                    <a class="popup"  onclick="userInfoDetail(${d.customerId},${d.id})" href="javascript:;"
                       name="user-info-detail-link"><span class="glyphicon glyphicon-link"></span></a>
                </div>
            </div>
            <div class="class-details">
                <h3><a href="javascript:;" title="${d.source}" onclick="userInfoDetail(${d.customerId},${d.id})" style="width: 100%;" class="text-single-line">${d.source}</a></h3>
                <p style="width: 100%;" class="text-single-line">${d.title}</p>
                <div class="clearfix row">
                    <div class="class-meta" style="display: inline-block; width: auto;">
                        <!-- 人物详情 -->
                        <span><a class="text-single-line text-center" style="width: 66px;" href="javascript:;" title="${d.customerName}" onclick="userInfo(${d.customerId})">${d.customerName}</a></span>
                        <p><img src="${d.headImg}" style="width: 20px; height: 20px;"></p>
                    </div>
                    <div class="class-meta" style="display: inline-block">
                        <span>价格</span>
                        <p>${d.price}</p>
                    </div>
                    <div class="class-meta" style="display: inline-block">
                        <span>收藏</span>
                        <p>${d.collectCount}</p>
                    </div>
                    <div class="class-meta" style="display: inline-block">
                        <span>评论</span>
                        <p>${d.commentCnt}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {%/each%}
</template>

<script>
    function userInfoDetail(customerId, id) {
        location.href=ctx + '/front/user_info_detail/'+customerId+'/'+id;
    }

    function userInfo(customerId) {
        if (isLogin()) {
            var loginCustomerId = getUserInfo().id;
            // 查询自建的作品
            if (loginCustomerId == customerId) {
                location.href=ctx + '/front/user_info/'+customerId+"/0";
                return;
            }
        }
        location.href=ctx + '/front/user_info/'+customerId+"/1";
    }

    $(function () {

        var pageSize = 9;
        var loadPage = function (page) {

            var category = $("#categoryContainer li.active").attr("data-id");
            $.get(ctx + "/front/discover_data", {status: 1, category: category, pageNo: page, pageSize: pageSize}, function (rtn) {
                if (rtn && rtn.code != 1) {
                    Alert("获取数据失败");
                    return;
                }
                var list = rtn.data.list;
                if (!list) {
                    return;
                }
                $("#disconver-container").empty();
                $("#discover-template").tmpl(rtn.data).appendTo('#disconver-container');

                var totalPage = Math.ceil(rtn.data.total / pageSize); // 总页数
                $("#pager").empty().zPager(
                    {
                        totalData: rtn.data.total, // 总记录数
                        pageData: pageSize, // 每页展示记录数
                        pageCount: totalPage, // 总页码
                        current: page // 当前页码
                    }
                );
            });
        };

        $(document).on("click", "#categoryContainer li", function () {
            $("#categoryContainer li").removeClass("active");
            $(this).addClass("active");
            loadPage(1);
        });

        $(document).on("click", "div.pager a", function () {
            var $this = $(this);
            var disabledAttr = $this.attr("disabled");
            if (disabledAttr != "undefined" && disabledAttr == "disabled") {
                return false;
            }

            var targetPage = $this.attr("page-id");
            var cs = $("div.pager span.current");
            var curPage = cs.attr("page-id");
            if (targetPage == curPage) {
                return;
            }

            loadPage(parseInt(targetPage));
        });

        loadPage(1);
    });
</script>
</body>
</html>

